 
import React from "react";
import { S2DataConfig } from '@antv/s2';
import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
import '@antv/s2-react/dist/s2-react.min.css';
import data from './data.json';

// 1000000
data.data = data.data.flatMap(item => Array(10000).fill(item)).map((i, index) => ({ ...i, province: `${i.province}-${index}` }))

const dataConfig: S2DataConfig = data;

const options: SheetComponentOptions = {
  width: 1000,
  height: 800,
  seriesNumber: {
    enable: true
  },
  interaction: {
    selectedCellHighlight: false
  },
  transformCanvasConfig: (renderer) => {
    renderer.setConfig({
      enableCulling: true,
    });
  }
};

const TableComponent = () => {
  const onDataCellEditStart= (meta,cell) => {
    console.log('onDataCellEditStart:', meta, cell);
  };

  const onDataCellEditEnd = (meta, cell) => {
    console.log('onDataCellEditEnd:', meta, cell);
  };

  return (
    <SheetComponent
      sheetType="editable"
      dataCfg={dataConfig}
      options={options}
      onDataCellEditStart={onDataCellEditStart}
      onDataCellEditEnd={onDataCellEditEnd}
    />
  )
};

export default TableComponent;
